<template>

  <div class="mine">
    <div class="headerUser" ref='headerUser' v-show="showHeaderUser">
      <img src="../../assets/image/mine/default.png" class="headerPhoto" v-if='!loginFlag' alt="" @click="goPersonalInfo" />
      <img :src="userData.AVATAR" class="headerPhoto" v-if='loginFlag&&userData.AVATAR' alt="" @click="goPersonalInfo" />
      <p>{{userData.USERNAME}}</p>
      <img class="settingB" src="../../assets/image/mine/settingb.png" alt="" @click="goSetting">
    </div>
    <div class="header" id="header">
      <!---------------------------- 测试用户，打包请注释掉 start ---------------------------------------->
      <!--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
        <!--<div class="loginUser" @click='goLoginUser'></div>-->
      <!--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
      <!---------------------------- 测试用户，打包请注释掉 end ------------------------------------------>
      <div class="headerLogo">
        <img src="../../assets/image/mine/default.png" class="headerPhoto" v-if='!loginFlag' alt="" @click="goPersonalInfo" />
        <img :src="userData.AVATAR" class="headerPhoto" v-if='loginFlag&&userData.AVATAR' alt="" @click="goPersonalInfo" />
        <img src="../../assets/image/mine/default.png" class="headerPhoto" v-if='loginFlag&&!userData.AVATAR' alt="" @click="goPersonalInfo" />
        <img src="../../assets/image/mine/edit.png" class="edit" v-if='loginFlag' alt="" @click="goPersonalInfo" />
      </div>
      <div class="userMess">
        <div class="login" v-if='loginFlag'>
          <h1 class="userName">{{userData.USERNAME}}</h1>
          <div>
            <img v-if="levelData.MEMBERGRADE==1" src="../../assets/image/macaroni/lvDiamond2.png" alt="" @click="goMacaroni" />
            <img v-else-if="levelData.MEMBERGRADE==2" src="../../assets/image/macaroni/lvGold2.png" alt="" @click="goMacaroni" />
            <img v-else-if="levelData.MEMBERGRADE==3" src="../../assets/image/macaroni/lvSilver2.png" alt="" @click="goMacaroni" />
            <img v-else-if="levelData.MEMBERGRADE==5" src="../../assets/image/macaroni/lvRegister.png" alt="" @click="goMacaroni" />
            <img v-else src="../../assets/image/macaroni/lvCopper2.png" alt="" @click="goMacaroni" />
          </div>
        </div>
        <img v-if='loginFlag' src="../../assets/image/mine/qd4.png" alt="" @click="signInAlert" />
        <div class="noLogin" v-if='!loginFlag' @click="goLogin">
          <span>请登录/注册<img src="../../assets/image/rightArrow.png"></span>
        </div>
      </div>
      <div class="setting" @click="goSetting">
        <img src="../../assets/image/mine/setting.png" alt="" />
      </div>
    </div>
    <div class="allFun">
        <div class="orderType">
          <div class="allOrder border-bottom" @click='goOrder(0)'>
            <h1>
              <img class="icons" src="../../assets/image/mine/icon_order.jpg" alt="">
              我的订单
            </h1>
            <span>全部订单&nbsp;<img src="../../assets/image/mine/right.png" alt="" /></span>
          </div>
          <div class="orderClass">
            <div class="itemClass" @click='goOrder(1)'>
              <div>
                <img src="../../assets/image/mine/order1.png" alt="" />
                <badge v-if="num1>0" :text='num1'></badge>
              </div>
              <p>待服务</p>
            </div>
            <div class="itemClass" @click='goOrder(2)'>
              <img src="../../assets/image/mine/order2.png" alt="" />
              <badge v-if="num2>0" :text='num2'></badge>
              <p>待付款</p>
            </div>
            <div class="itemClass" @click='goOrder(3)'>
              <img src="../../assets/image/mine/order3.png" alt="" />
              <badge v-if="num3>0" :text='num3'></badge>
              <p>待评价</p>
            </div>
            <div class="itemClass" @click='goOrder(4)'>
              <img src="../../assets/image/mine/order4.png" alt="" />
              <badge v-if="num4>0" :text='" "+num4'></badge>
              <p>已完成</p>
            </div>
          </div>
        </div>
        <!-- 车保养项目 -->
        <service-vehicle ref="mychild"  @changeC="changeCars(3)"></service-vehicle>
        <!-- 所有icon功能 -->
        <div class="allItem">
          <div class="allItemTitle">
            <img class="icons" src="../../assets/image/mine/icon_service.jpg" alt="">
            我的服务
          </div>
          <div class="itemTop">
            <div class="item border-bottom" @click="goMsgCenter">
              <img src="../../assets/image/mine/fun1.png" alt="" />
              <badge v-if="num5>0" :text='num5'></badge>
              <p>消息中心</p>
            </div>
            <div class="item border-bottom" @click='goCar'>
              <img src="../../assets/image/mine/fun2.png" alt="" />
              <p>我的车辆</p>
            </div>
            <div class="item years border-bottom" @click='goMember'>
              <img src="../../assets/image/mine/member.png" alt="" />
              <p>会员中心</p>
            </div>
            <div class="item border-bottom" @click="goTicket">
              <img src="../../assets/image/mine/fun3.png" alt="" />
              <badge v-if="num6>0" :text='num6'></badge>
              <p>我的券包</p>
            </div>
            <!-- <div class="item years border-bottom" @click='goMaintainCard'>
              <img src="../../assets/image/mine/fun4.png" alt="" />
              <badge v-show="show8" text='¥399'></badge>
              <p>保养年卡</p>
            </div> -->
          </div>
          <div class="itemCenter">
            <div class="item years border-bottom" @click='goMaintainCard'>
              <img src="../../assets/image/mine/fun4.png" alt="" />
              <badge v-show="show8" text='¥399'></badge>
              <p>保养年卡</p>
            </div>
            <div class="item border-bottom" @click="goCollect">
              <img src="../../assets/image/mine/fun5.png" alt="" />
              <p>我的收藏</p>
            </div>
            <div class="item border-bottom" @click='goAddress'>
              <img src="../../assets/image/mine/fun8.png">
              <p>收货地址</p>
            </div>
                <!-- <div class="item border-bottom" @click="goInvite">
        <img src="../../assets/image/mine/fun7.png" alt="" />
        <p>邀请有奖</p>
      </div> -->
          <div class="item border-bottom" @click="goGroupVoucher">
            <img src="../../assets/image/mine/fun9.png" alt="" />
            <p>我的免单券</p>
          </div>
          <!-- <div class="item border-bottom" @click="goShoppingCart">
            <img src="../../assets/image/mine/fun6.png" alt="" />
            <badge v-if="num7>0" :text='num7'></badge>
            <p>我的购物车</p>
          </div> -->
        </div>
        <div class="itemBottom">
          <div class="item border-bottom" @click="goQuestion">
            <img src="../../assets/image/question/question.png" alt="" />
            <p>我的问答</p>
          </div>
          <div class="item border-bottom" @click="goComment">
            <img src="../../assets/image/mine/fun10.png" alt="" />
            <p>我的评价</p>
          </div>
          <div class="item border-bottom" @click="gocustomerService">
            <img src="../../assets/image/mine/helpserver.png" alt="" />
            <p>客服与帮助</p>
          </div>
        </div>
          <div class="itemBottomBlank"></div>
      </div>
      <!-- 违章查询 -->
      <div class="illegalQuery" id="illegalQuery" v-if="userId">
        <div class="illegalHeader" @click="changeCars(1)">
          <img src="../../assets/image/mine/icon_order.jpg" alt="">
          <p>违章查询</p>
          <p>(支持全国400+城市一键缴费)</p>
          <p>{{carValue ? carValue : '暂无车辆'}}</p>
          <img src="../../assets/image/mine/right.png" alt="" />
        </div>
        <div class="illegalInfo1" v-if="!illegalData&&!flag || illegalData.ILLEGAL_UNTIMES==0&&!flag">
          <div class="noIllegal">
            该车尚无违章扣分的罚单,请继续保持吧~
          </div>
        </div>
        <div class="illegalInfo2" v-if="flag">
          <p>您的发动机号或车架号未填写</p>
          <p @click="goEditCar">完善车辆信息</p>
        </div>
        <div class="illegalInfo3" v-if="illegalData&&!flag&&illegalData.ILLEGAL_UNTIMES!=0">
          <div class="illegalInfoTitle">
            <p>扣分</p>
            <p>罚款</p>
            <p>未处理</p>
          </div>
          <div class="illegalInfoNum">
            <p><span>{{illegalData.TOTAL_FEN}}</span>分</p>
            <p><span>{{illegalData.TOTAL_MONEY}}</span>元</p>
            <p><span>{{illegalData.ILLEGAL_UNTIMES}}</span>条</p>
          </div>
          <p @click="goHandle">去处理</p>
        </div>
      </div>
      <!-- 加油分析 -->
      <div class="oilAnalysis" v-if="userId">
        <div class="oilHeader" @click="changeCars(2)">
          <img src="../../assets/image/mine/icon_oil.jpg" alt="">
          <p>加油分析</p>
          <p style="visibility:hidden;">(支持全国400+城市一键缴费)</p>
          <p>{{carValue ? carValue : '暂无车辆'}}</p>
          <img src="../../assets/image/mine/right.png" alt="" />
        </div>
        <div class="oilInfo2" v-if="oilData&&!noOilData">
          <div class="oilInfoTitle">
            <p>去年</p>
            <p>上个月</p>
            <p>本月</p>
          </div>
          <div class="oilInfoSum">
            <!--去年-->
            <p v-if="oilData.LAST_YEAR_PRICE">
              <span>{{oilData.LAST_YEAR_PRICE ? oilData.LAST_YEAR_PRICE : 0}}</span>元
            </p>
            <p v-else>
              <img src="../../assets/image/rememberOil/noOilRecord.jpg" alt="">
              <label>尚未加油</label>
            </p>
            <!--上个月-->
            <p v-if="oilData.LAST_MONTH_PRICE">
              <span>{{oilData.LAST_MONTH_PRICE ? oilData.LAST_MONTH_PRICE : 0}}</span>元
            </p>
            <p v-else>
              <img src="../../assets/image/rememberOil/noOilRecord.jpg" alt="">
              <label>尚未加油</label>
            </p>
            <!--本月-->
            <p v-if="oilData.NOW_MONTH_PRICE">
              <span>{{oilData.NOW_MONTH_PRICE ? oilData.NOW_MONTH_PRICE : 0}}</span>元
            </p>
            <p v-else>
              <img src="../../assets/image/rememberOil/noOilRecord.jpg" alt="">
              <label>尚未加油</label>
            </p>
          </div>
          <div class="oilInfoBtn">
            <p @click="goOilEntry(2)">记一笔加油</p>
            <p @click="goOilRecord(2)">加油记录</p>
          </div>
        </div>
        <div class="oilInfo1" v-if="!oilData||noOilData">
          <p>您尚未开始记录加油,快开始记录看看</p>
          <p>您的爱车耗油吧~</p>
          <div>
            <p @click="goOilEntry(1)">记一笔加油</p>
            <p @click="goOilRecord(1)">加油记录</p>
          </div>
        </div>
      </div>
      <!-- 猜你喜欢 -->
        <!--<div class="carPro" v-show="youLikeData.length!=0" v-if='youLikeData'>
          <h1>
            <img src="../../assets/image/mine/like2.png" alt="" />
          </h1>
          <div class="allProduct">
            <div class="listItem productBorder" v-for='(item,index) in youLikeData' :key="index" @click='goDetail(item.SERV_ID)'>
              <img :src="item.COVER_IMG" alt="" />
              <p>{{item.REMARK}}</p>
              <h2>{{item.SERV_SUBJECT}}</h2>
              <div class="price">
                <span>￥{{item.PRICE}}</span>
                <img src="../../assets/image/home/shopCar.png" alt="" />
              </div>
            </div>
          </div>
        </div>-->
    </div>
    <!--签到弹窗-->
    <popup v-model="popupVisible" height="100%">
      <div class="popupImg">
        <div class="popupImgSignin">
          <img src="../../assets/image/macaroni/tongAlert.png" alt="" />
        </div>
        <div class="popupImgClose" @click="noShowAlert">
          <img src="../../assets/image/close.png" alt="" />
        </div>
      </div>
    </popup>
    <!--确认框-->
    <confirm v-model="confirmVisible" title="提示" @on-confirm="goLogin">
      <p style="text-align:center;">您当前尚未登录，现在前往登录？</p>
    </confirm>
    <!--选车popup-->
    <div class="changeCars" @click="closeCars">
      <popup v-model="popup3Show" width="100%" style="overflow:scroll;" position="right"  @on-hide="closeCars">
        <oilAllCar></oilAllCar>
      </popup>
    </div>
  </div>
</template>

<script>
// 我的模块
import { Badge, Popup, Alert, Confirm,PopupPicker,Group } from "vux";
import { getCookie, setCookie } from "../../util/commonUtils";
import serviceVehicle from "./serviceVehicle.vue";
import allCar from "../carAdd/allCar.vue";
import oilAllCar from "../rememberOil/oilAllCar.vue";
export default {
  name: "mine",
  // 数据
  data() {
    return {
      loginFlag: false, //是否登录
      headLogo: "", //头像
      userId: "", //用户id
      youLikeData: "", //猜您喜欢数据
      userData: "", //用户数据
      signCode: "", //签到状态码1-正常返回 2-该用户当天已签到，无需二次签到
      popupVisible: false, //弹窗是否可见
      confirmVisible: false, //确认是否可见，提示去登陆
      num1: 0, //待服务数量
      num2: 0, //待付款数量
      num3: 0, //待评价数量
      num4: 0, //已完成数量
      num5: 0, //消息中心数量
      num6: 0, //我的券包数量
      num7: 0, //购物车数量
      show8: false,
      levelData: "", //级别
      showHeaderUser: false, //我的顶部导航是否出现
      flag:false,//违章是否完善车辆信息
      allCar:'',//所有车辆
      carValue:'',//选中车牌号
      oilData:'',//加油分析数据
      noOilData:false,//没有加油记录,主要是三个数据都是0
      illegalData:'',//违章查询数据
      popup3Show:false,//是否显示popup
    };
  },
  components: {
    Badge,
    Popup,
    Alert,
    Confirm,
    serviceVehicle,
    allCar,
    oilAllCar,
    PopupPicker,
    Group,
  },
  // 计算属性
  computed: {},
  // 创建（实例创建完成）
  created() {
    this.userId = getCookie("loginkey");
    localStorage.removeItem('editCar');
    //this.userId = 169623;
    if (this.userId) {
      this.loginFlag = true;
      this.show8 = true;
    } else {
      return false;
    }
    //setCookie('loginkey','205818');//江政彬id
    // setCookie('userName','13827329584');//江政彬id
    // setCookie('loginkey','229012');//少丽id
    // setCookie('loginkey','137038');//继定id
    //个人信息
    this.$fetchGet("/UserWeb/getUserInfo.action", {
      USER_ID: this.userId
    }).then(
      res => {
        if (res.STATUS_CODE == 1) {
          this.userData = res;
          setCookie("TEL", res.TEL);
        }
      },
      err => console.log(err)
    );
    //会员签到
    this.$fetchGet("/MemberIntegralWeb/memberSign", {
      USER_ID: this.userId
    }).then(
      res => {
        this.signCode = res.STATUS_CODE;
      },
      err => console.log(err)
    );
    //获取会员经验值、等级、通币
    this.$fetchPost("/ExperienceValueWeb/getMemberInfoByUserId", {
      USER_ID: this.userId
    }).then(
      res => {
        if (res.STATUS_CODE == 1) {
          this.levelData = res;
        }
      },
      err => console.log(err)
    );
    //用户的订单统计和未使用的券包
    this.$fetchGet("/ServOrderWeb/getUserOrderStatus", {
      USER_ID: this.userId
    }).then(
      res => {
        this.num1 = res.WAIT_SERV;
        this.num2 = res.WAIT_PAY;
        this.num3 = res.WAIT_EVALUATE;
        this.num4 = res.ORDER_FINISH;
        this.num6 = res.CASH_VOL_NUM;
      },
      err => console.log(err)
    );
    //消息总数
    this.$fetchGet("/CNotificationWeb/newPageAllNotificationNum.action", {
      USER_ID: this.userId
    }).then(
      res => {
        if (res.STATUS_CODE == 1) {
          this.num5 = res.COUNT;
        }
      },
      err => console.log(err)
    );
    //购物车列表
    this.$fetchGet("/ShoppingCartWeb/getShopCart", {
      USER_ID: this.userId
    }).then(
      res => {
        if (res.STATUS_CODE == 1) {
          this.num7 = res.SHOPPING_CART;
        }
      },
      err => console.log(err)
    );
    //猜您喜欢
    this.$fetchGet("/BrowHobbyWebAction/getbrowseHobby", {
      USER_ID: this.userId,
      pageNo: 1
    }).then(
      res => {
        if (res.STATUS_CODE == 1) {
          this.youLikeData = res.RESULT_DATA.slice(0, 6);
        }
      },
      err => console.log(err)
    );
    //监控滚动条
    this.$nextTick(()=>{
        this.scrollMonitorTop();
     });
    this.getAllCars();
  },
  // el被创建，并挂载到实例上
  mounted() {

  },
  // 方法（实例中的方法）-----------
  methods: {
    //获取所有车辆
    getAllCars(){
      //获取用户所有车辆
      this.$fetchGet('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
          this.allCar=res.CARS;
          //过滤掉有'未设置'三个字的车
          for(let j=0;j<this.allCar.length;j++){
            if(this.allCar[j].BRAND=='未设置' || this.allCar[j].LICENCE=='未设置'){
              this.allCar.splice(j,1);
            }
          }
          if(this.allCar.length==0){
            return;
          }
          for(let i=0;i<this.allCar.length;i++){
            if(this.allCar[i].IS_DEFAULT_CAR == 1){//默认车辆
              this.carValue = this.allCar[i].LICENCE;
            }
          }
          //无默认车辆选第一个
          if(!this.carValue){
            this.carValue = res.CARS[0].LICENCE;
          }
          this.illegalInfo();
          this.oilAnalysis();
        }
      },err=>{
        console.log(err);
      });
    },
    //测试登录页面，需要点击两次，打包请注释掉
    goLoginUser() {
      if (sessionStorage.getItem("loginUsers") == 1) {
        sessionStorage.removeItem("loginUsers");
        this.$router.push("/loginUser");
      } else {
        let num = Number(sessionStorage.getItem("loginUsers"));
        num++;
        sessionStorage.setItem("loginUsers", num);
      }

    },
    // 监听滚动条显示顶部导航
    scrollMonitorTop(){
      let that = this
      window.onscroll = function(){
        if(location.href.split('#')[1]!='/mine'){
          return;
        }
        let top=document.body.scrollTop||document.documentElement.scrollTop;
        let top1=document.getElementById('header').offsetHeight;
        if(top>80){
          that.showHeaderUser = true;
        }else{
          that.showHeaderUser = false;
        }
      }
    },
    //登录
    goLogin() {
      this.$router.push("/login");
    },
    //购物车
    goShoppingCart() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/shoppingCart");
    },
    //我的券包
    goTicket() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/ticket");
    },
    //消息中心
    goMsgCenter() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/msgCenter");
    },
    //我的收藏
    goCollect() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/collect");
    },
    //个人信息
    goPersonalInfo() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/personalInfo");
    },
    //通心粉
    goMacaroni() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/macaroni");
    },
    //签到弹窗
    signInAlert() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      if (this.signCode == 2) {
        this.$vux.alert.show({
          title: "提示",
          content: "亲,今天已签到,明天再来吧!"
        });
        return;
      }
      this.popupVisible = true;
    },
    //关闭弹窗
    noShowAlert() {
      this.popupVisible = false;
    },
    //设置
    goSetting() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/setting");
    },
    //订单列表
    goOrder(id) {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/order/" + id);
    },
    //保养年卡
    goMaintainCard() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/yearCard");
    },
    //我的车辆
    goCar() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/allCar");
    },
    //去收货地址模块
    goAddress() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/address");
    },
    //邀请有奖
    goInvite() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/invitation");
    },
    goGroupVoucher() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/groupVoucher");
    },
    goComment() {
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push("/myComment");
    },
    gocustomerService() {
      this.$router.push("/customerService");
    },
     goQuestion(){
             if(!this.userId) {
                this.confirmVisible = true;
                return;
            }
          this.$router.push('/question');
        },
    //车品详情
    goDetail(id) {
      this.$router.push("/shopDetail/" + id);
    },
    //会员中心
    goMember(){
      if (!this.userId) {
        this.confirmVisible = true;
        return;
      }
      this.$router.push('/macaroni');
    },
    //加油分析
    oilAnalysis(){
      this.$vux.loading.show({text: '加载中'});
      if(!this.carValue){
        this.$vux.loading.hide();
        return ;
      }
      this.$fetchPost("/FuelManager/gasAnalysis", {
        USER_ID: this.userId,
        CAR_NUMBER: this.carValue
      }).then(
        res => {
          if (res.STATUS_CODE == 1) {
            this.$vux.loading.hide();
            this.oilData = res;
            if(!res.LAST_MONTH_PRICE&&!res.LAST_YEAR_PRICE&&!res.NOW_MONTH_PRICE){
              this.noOilData = true;
            }
          }
        },
        err => console.log(err)
      );
    },
    //记一笔加油
    goOilEntry(id){
      let that = this;
      //有加油分析
      if(id===2){
        this.$router.push('/rememberOilEntry');
        localStorage.setItem('carNum',this.carValue);
      }else if(id===1){
        if(!this.carValue){
          this.$vux.alert.show({
            title: "提示",
            content: "请先添加车辆1!",
            onShow () {
              that.$router.push('/allCar');
            },
          });
          return;
        }
        this.$router.push('/rememberOilEntry');
        localStorage.setItem('carNum',this.carValue);
      }
    },
    //加油记录
    goOilRecord(id){
      let that = this;
      //有加油分析
      if(id===2){
        this.$router.push('/rememberOilRecord/'+this.carValue);
        localStorage.setItem('carNum',this.carValue);
      }else if(id===1){
        if(!this.carValue){
          this.$vux.alert.show({
            title: "提示",
            content: "请先添加车辆!",
            onShow () {
              that.$router.push('/allCar');
            },
          });
          return;
        }
        this.$router.push('/rememberOilRecord/'+this.carValue);
        localStorage.setItem('carNum',this.carValue);
      }
    },
    //违章查询
    illegalInfo(){
      this.$vux.loading.show({text: '加载中'});
      let frameNum,engineNum;
      for(let i=0;i<this.allCar.length;i++){
        if(this.carValue == this.allCar[i].LICENCE){
          frameNum = this.allCar[i].VIN;
          engineNum = this.allCar[i].ENGINE_NUM;
        }
      }
      if(!frameNum||!engineNum){
        this.flag = true;
        this.$vux.loading.hide();
        return;
      }
      this.flag = false;
      let obj = {};
      obj.SCAR_NUMBER = this.carValue;
      obj.FRAME_NO = frameNum;
      obj.ENG_NO = engineNum;
      obj.USER_ID = this.userId;
      this.$fetchPost("/IllegalBaoWeb/allIllegal.action",obj).then(
        res => {
          if (res.STATUS_CODE == 1) {
            this.$vux.loading.hide();
            this.illegalData = res;
          }
        },
        err => console.log(err)
      );
    },
    //完善车辆信息
    goEditCar(){
      this.$router.push('/myUpdateCar/'+this.carValue);
    },
    //去处理
    goHandle(){
      this.$router.push('/illegalHome');
    },
    //换车
    changeCars(id){
      this.noOilData = false;
      this.popup3Show = true;
    },
    //关闭popup
    closeCars(){
      var that = this;
      setTimeout(()=>{
        that.popup3Show = false,
        that.getAllCars(),
        this.$refs.mychild.getUserCar()//父组件调用子组件的方法
      },300);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
//1px的边框引入
@import url("../../assets/css/public.less");
.vux-badge-single {
  padding: 0;
  width: 16px;
}
.headerUser{
  position: fixed;
  height: 0.88rem;
  width: 7.5rem;
  z-index: 888;
  display: flex;
  align-items: center;
  background: #fff;
  justify-content: space-between;
  border-bottom:1px solid #ededed;
  p{
    font-size: 0.32rem;
    color: #222222;
  }
  >img:nth-child(1){
    width: 0.6rem;
    height: 0.6rem;
    margin-left: 0.3rem;
    border-radius: 50%;
  }
  >img:nth-child(3){
    width: 0.6rem;
    height: 0.6rem;
    padding: 0.1rem;
    margin-right: 0.3rem;
  }
  .settingB{
    width:.4rem;
    height:.4rem;
  }
}
.vux-badge {
  width: 0.34rem;
  height: 0.34rem;
  text-align: center;
  background: #f63b3b;
  color: #fff;
  font-size: 0.21rem;
  border-radius: 50%;
  line-height: 0.34rem;
  padding: 0 0.06rem;
  background-clip: padding-box;
  vertical-align: middle;
  position: absolute;
  top: 0rem;
  right: 0.3rem;
}
.icons{
  width:.08rem;
  height:.3rem;
  margin:0 .18rem 0 0;
}
.mine {
  width: 7.5rem;
  padding-bottom:.95rem;
  .header {
    height: 3rem;
    background: red;
    display: flex;
    background: url(../../assets/image/mine/headerBg.png) no-repeat;
    background-size: 7.5rem 3rem;
    justify-content: space-around;
    position:relative;
    .loginUser {
      position: absolute;
      top: 0;
      left:50%;
      transform:translateX(-50%);
      width: 2.6rem;
      height: 0.7rem;
    }
    .headerLogo {
      width: 30%;
      padding: 0.7rem 0.1rem;
      .headerPhoto {
        border-radius: 100%;
        margin-right: -0.18rem;
      }
      img {
        width: 1.3rem;
        height: 1.3rem;
      }
      .edit {
        width: 0.25rem;
        height: 0.25rem;
        margin-left: -0.1rem;
        margin-bottom: 0.1rem;
      }
    }

    .userMess {
      width: 58%;
      padding: 0.9rem 0 0.5rem;
      text-align: left;
      h1 {
        font-size: 0.32rem;

        color: #fff;
        margin-bottom: 0.2rem;
      }
      div {
        height: 0.8rem;
        img {
          display: block;
          margin-right: 0.3rem;
          float: left;
          width: 1.9rem;
          height: 0.5rem;
        }
      }
      >img{
        position:absolute;
          right:0;
          bottom:.84rem;
          width: 1.9rem;
          height: .56rem;
      }
      .noLogin {
        font-size: 0.3rem;
        color: #fff;
        padding: 0.3rem 0;
        span{
          display:flex;
          align-items:center;
          img{
            width:.15rem;
            height:.25rem;
            margin-left:.1rem;
          }
        }
      }
    }
    .setting {
      width:1rem;
      height:1.2rem;
      position: relative;
      display: flex;
      justify-content: center;
      img {
        align-self: center;
        position: absolute;
        top: 0.4rem;
        right: 0.3rem;
        width: 0.4rem;
        height: 0.4rem;
      }
    }

  }
  .allFun {
    .illegalQuery{
      border-bottom:.1rem solid #ededed;
      .illegalHeader{
        height:.8rem;
        display:flex;
        align-items:center;
        white-space:nowrap;
        .borderBFu(#e1e2df);
        img:nth-of-type(1){
          width:.08rem;
          height:.3rem;
          margin:0 .15rem 0 .3rem;
        }
        img:nth-of-type(2){
          width:.1rem;
          height:.19rem;
          margin-left:.1rem;
        }
        p:nth-of-type(1){
          font-size:.29rem;
          color:#555;
        }
        p:nth-of-type(2){
          font-size:.24rem;
          color:#999;
          margin:0 .88rem 0 .09rem;
        }
        p:nth-of-type(3){
          font-size:.24rem;
          color:#888;
        }
      }
      .illegalInfo1{
        height:1.5rem;
        display:flex;
        justify-content:center;
        align-items:center;
        .noIllegal{
          font-size:.24rem;
          color:#888;
        }
      }
      .illegalInfo2{
        height:2.36rem;
        display:flex;
        flex-flow:column;
        justify-content:center;
        align-items:center;
        p{
          margin:.29rem 0;
        }
        p:nth-of-type(1){
          font-size:.27rem;
          color:#888;
        }
        p:nth-of-type(2){
          font-size:.27rem;
          color:#FA4040;
          width:2.5rem;
          height:.56rem;
          border:1px solid #FA4040;
          border-radius:.28rem;
          line-height:.56rem;
        }
      }
      .illegalInfo3{
        height:3.3rem;
        display:flex;
        flex-flow:column;
        align-items:center;
        .illegalInfoTitle{
          margin-top:.45rem;
          display:flex;
          p{
            width:2.5rem;
            font-size:.29rem;
            color:#888;
          }
        }
        .illegalInfoNum{
          margin:.1rem 0 .35rem 0;
          display:flex;
          p{
            width:2.5rem;
            font-size:.29rem;
            color:#f93f42;
            span{
              font-size:.67rem;
            }
          }
        }
        >p{
          font-size:.27rem;
          color:#FA4040;
          width:2.5rem;
          height:.56rem;
          border:1px solid #FA4040;
          border-radius:.28rem;
          line-height:.56rem;
        }
      }
    }
    .oilAnalysis{
      border-bottom:.1rem solid #ededed;
      .oilHeader{
        height:.8rem;
        display:flex;
        align-items:center;
        white-space:nowrap;
        .borderBFu(#e1e2df);
        img:nth-of-type(1){
          width:.08rem;
          height:.3rem;
          margin:0 .15rem 0 .3rem;
        }
        img:nth-of-type(2){
          width:.1rem;
          height:.19rem;
          margin-left:.2rem;
        }
        p:nth-of-type(1){
          font-size:.29rem;
          color:#555;
        }
        p:nth-of-type(2){
          font-size:.24rem;
          color:#999;
          margin:0 .88rem 0 .09rem;
        }
        p:nth-of-type(3){
          font-size:.24rem;
          color:#888;
        }
        .selectOne{
          .weui-cells{
            margin-top:.5rem!important;

          }
          .vux-popup-picker-value{
            color:red!important;
          }
        }
      }
      .oilInfo1{
        height:2.36rem;
        display:flex;
        flex-flow:column;
        align-items:center;
        p{
          font-size:.24rem;
          color:#888;
        }
        >p:nth-of-type(1){
          margin:.4rem 0 .1rem 0;
        }
        >p:nth-of-type(2){
        }
        >div{
          width:100%;
          height:.56rem;
          display:flex;
          justify-content:center;
          margin-top:.34rem;
          p{
            margin:0 .12rem;
            width:2.5rem;
            height:.56rem;
            border-radius:.28rem;
            font-size:.27rem;
            line-height:.56rem;
          }
          p:nth-of-type(1){
            color:#fff;
            background:#FFAC4A;
          }
          p:nth-of-type(2){
            border:1px solid #FFAC4A;
            color:#FFAC4A;
            background:#FFF;
          }
        }
      }
      .oilInfo2{
        .oilInfoTitle{
          margin-top:.45rem;
          display:flex;
          p{
            width:2.5rem;
            font-size:.29rem;
            color:#888;
          }
        }
        .oilInfoSum{
          margin:.1rem 0 .35rem 0;
          display:flex;
          p{
            width:2.5rem;
            font-size:.27rem;
            color:#FFAC4A;
            position:relative;
            img{
              width:.32rem;
              height:.53rem;
              margin:.2rem 0 0 0;
            }
            label{
              position:absolute;
              top:50%;
              tranform:translateY(-50%);
              white-space:nowrap;
            }
            span{
              font-size:.67rem;
            }
          }
        }
        .oilInfoBtn{
          width:100%;
          height:.56rem;
          display:flex;
          justify-content:center;
          margin-bottom:.3rem;
          p{
            margin:0 .12rem;
            width:2.5rem;
            height:.56rem;
            border-radius:.28rem;
            font-size:.27rem;
            line-height:.56rem;
          }
          p:nth-of-type(1){
            color:#fff;
            background:#FFAC4A;
          }
          p:nth-of-type(2){
            border:1px solid #FFAC4A;
            color:#FFAC4A;
            background:#FFF;
          }
        }
      }
    }
    .carPro {
      background: #fff;
      h1 {
        height: 0.8rem;
        line-height: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 0.2rem;
        img {
          align-self: center;
          width: 2rem;
          height: 0.29rem;
        }
      }
      .allProduct {
        display: flex;
        flex-wrap: wrap;
        .listItem {
          padding: 0rem 0 0.05rem 0;
          margin: 0 0.1rem 0.1rem 0.175rem;
          box-sizing: border-box;
          img {
            width: 3.5rem;

            height: 3rem;
            background: #f7f7f7;
            display: block;
          }
          h2 {
            width: 3.5rem;
            margin-top: 0.2rem;
            font-size: 0.26rem;
            line-height: 0.4rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            color: #222;
          }
          p {
            font-size: 0.22rem;
            z-index: 2;
            height: 0.5rem;
            line-height: 0.5rem;
            position: relative;
            width: 3.46rem;
            margin: 0 auto;
            background: #f7f7f7;
            color: #ec2121;
          }
          .price {
            width: 3.5rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 0.15rem 0.2rem 0.05rem 0.2rem;
            img {
              width: 0.4rem;
              height: 0.35rem;
              background: #fff;
            }

            span {
              font-size: 0.25rem;
              color: #e84632;
              padding-right: 0.15rem;
              font-weight: bolder;

            }
          }
        }
        .listItem:nth-child(2n) {
          padding: 0rem 0rem 0.1rem 0;
          margin: 0 0.175rem 0.1rem 0;
        }
      }
    }
    /*边框一像素*/
    .productBorder {
      position: relative;
    }
    .productBorder::after {
      content: "";
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      transform: scale(0.5, 0.5);
      transform-origin: 0 0;
      border: 1px solid #e1e2df;
    }
    .orderType {
      height: 2.4rem;
      background: #fff;
      border-bottom: 0.1rem solid #ededed;
      .allOrder {
        display: flex;
        height: 0.8rem;
        line-height: 0.8rem;
        justify-content: space-between;
        padding: 0 0.3rem;
        h1 {
          font-size: 0.3rem;
          color: #040404;
          display:flex;
          align-items:center;
        }
        span {
          font-size: 0.25rem;
          vertical-align: middle;
          color: #999;
          img {
            width: 0.1rem;
            height: 0.19rem;
          }
        }
      }
      .orderClass {
        display: flex;
        height: 1.5rem;
        padding: 0.2rem 0;
        justify-content: space-between;
        .itemClass {
          text-align: center;
          width: 25%;
          position: relative;
          img {
            width: 0.44rem;
            height: 0.44rem;
            display: block;
            margin: 0.1rem auto;
          }
          p {
            font-size: 0.25rem;
            padding-top: 0.1rem;
            color: #333;
          }
        }
      }
    }
    .allItem {
      background: #fff;
      .allItemTitle{
        height:.8rem;
        font-size:.29rem;
        color:#555;
        display:flex;
        align-items:center;
        padding:0 .3rem;
        .borderBFu(#e1e2df);
      }
      .itemBottomBlank {
        width: 7.5rem;
        height: 0.1rem;
        background: #ededed;
      }
      .itemTop,
      .itemBottom,
      .itemCenter {
        display: flex;
        height: 2rem;
        text-align: center;
        justify-content: flex-start;
      }
      .item {
        .borderBFu(#efeff4);
        width: 25%;
        position: relative;
        img {
          width: 0.5rem;
          height: 0.5rem;
        }
        .vux-badge {
          top: 0.4rem;
          left: 1.05rem;
        }
      }
      .years {
        .vux-badge {
          top: 0.1rem;
          left: 0.8rem;
          padding: 0 6px;
          margin-left: 0.05rem;
          width: 0.74rem;
          height: 0.34rem;
          line-height: 0.34rem;
          border-radius: 0.2rem;
        }
      }
      .item p {
        font-size: 0.22rem;
        color: #333;
      }
    }
    .youLike {
      background: #ffffff;
      margin-bottom: 1.1rem;
      .youLikeTitle {
        display: flex;
        justify-content: center;
        img {
          align-self: center;
          width: 7.2rem;
          height: 0.6rem;
        }
      }
      .youLikeAll {
        width: 100%;
        background: #ffffff;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
        background: #efeff4;
        .youlikeList {
          width: 49.5%;
          display: flex;
          flex-flow: column;
          align-items: center;
          position: relative;
          border: 0.01rem solid #eeeeee;
          margin-top: 0.08rem;
          background: #fff;
          img:first-child {
            width: 100%;
            height: 3.35rem;
            margin-bottom: 0.2rem;
            border-radius: 0.15rem;
          }
          img:last-child {
            position: absolute;
            right: 0.2rem;
            bottom: 0.2rem;
            width: 0.4rem;
            height: 0.35rem;
          }
          h2 {
            width: 3.55rem;
            height: 0.32rem;
            font-size: 0.18rem;
            text-align: center;
            color: #ec2121;
            margin-top: -0.5rem;
            letter-spacing: 0.02rem;
            font-weight: bold;
          }
          h3 {
            width: 3.35rem;
            height: 0.8rem;
            font-size: 0.18rem;
            color: #000000;
            text-align: center;
            letter-spacing: 0.02rem;
            font-weight: bold;
            /*让文字只显示2行，其余用...代替start*/
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            /*让文字只显示2行，其余用...代替end*/
          }
          p {
            width: 3.35rem;
            font-size: 0.18rem;
            color: #ec2121;
            text-align: left;
            margin-bottom: 0.2rem;
            letter-spacing: 0.01rem;
            font-weight: bold;
          }
        }
      }
    }
  }
  .popupImg {
    width: 7.5rem;
    height: 13.34rem;
    background: #ede9e9;
    display: flex;
    flex-flow: column;
    justify-content: center;
    z-index: 99999;
    .popupImgSignin {
      img {
        align-self: center;
        width: 6.3rem;
        height: 5.8rem;
      }
    }
    .popupImgClose {
      img {
        align-self: center;
        width: 0.54rem;
        height: 0.54rem;
      }
    }
  }
}
</style>
